<template>
	<div class="apply">
		<div style="display: flex;justify-content: space-between;">
			<div style="display: flex;margin-left: 20px; line-height: 40px;">
				<el-radio v-model="applyType" :label="0" @input="getTableData">
					请假
				</el-radio>
				<el-radio v-model="applyType" :label="1" @input="getTableData">
					补卡
				</el-radio>
				<el-radio v-model="applyType" :label="2" @input="getTableData">
					外勤
				</el-radio>
				<el-radio v-model="applyType" :label="3" @input="getTableData">
					出差
				</el-radio>
			</div>
			<div style="display: flex">
				<el-select v-model="applicantId" filterable remote :loading="selectLoading"
					placeholder="按申请人搜索" clearable
					v-if="userInfo.roleId === '1' || userInfo.roleId === '5'"
					@change="getTableData" :remote-method="getUserList" 
					@focus="getUserList('')" style="width: 150px;">
					<el-option v-for="item in userList" :key="item.id" 
						:label="item.nickName" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="approvalStatus" :loading="selectLoading" 
					placeholder="按状态搜索" @change="getTableData" 
					style="width: 120px;margin-left: 10px;">
					<el-option label="待审核" :value="0"></el-option>
					<el-option label="已通过" :value="1"></el-option>
					<el-option label="未通过" :value="2"></el-option>
				</el-select>
				<el-button @click="reset" style="margin-left: 10px;" v-debounce>
					重置
				</el-button>
			</div>
		</div>
		<div class="data-table">
			<el-table :data="tableData" v-loading="loading" border stripe
				style="width: 100%" height="100%" ref="dataTable" fit>
				<el-table-column prop="i" label="序号" fixed="left" width="50">
				</el-table-column>
				<el-table-column prop="nickName" label="申请人" width="80">
				</el-table-column>
				<el-table-column prop="startTime" label="开始时间" width="170"
					v-if="applyType !== 1" key="startTime">
				</el-table-column>
				<el-table-column prop="stopTime" label="结束时间" width="170"
					v-if="applyType !== 1" key="stopTime">
				</el-table-column>
				<el-table-column v-if="applyType === 0" label="请假类型" width="80"
					key="vacateType">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.vacateType === 0">
							事假
						</el-tag>
						<el-tag v-if="scope.row.vacateType === 1" type="warning">
							病假
						</el-tag>
						<el-tag v-if="scope.row.vacateType === 2" type="info">
							其他
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="clockingDate" label="补卡日期" width="100"
					v-if="applyType === 1">
				</el-table-column>
				<el-table-column prop="stringLot" label="补卡批次" width="150"
					v-if="applyType === 1">
				</el-table-column>
				<el-table-column prop="applyExplain" label="申请事由" width="250">
				</el-table-column>
				<el-table-column prop="location" label="地点" width="120"
					v-if="applyType === 2 || applyType === 3">
				</el-table-column>
				<el-table-column prop="accessoryUrl" label="说明附件" width="115">
					<template slot-scope="scope">
						<el-image style="width: 90px; height: 90px" 
							v-if="scope.row.accessoryUrl !== null" 
							:src="READ_IMG_URL+scope.row.urlList[0]"
							:preview-src-list="addUrl(scope.row.urlList)">
						</el-image>
						<span v-else>无</span>
					</template>
				</el-table-column>
				<el-table-column prop="approvalName" label="审核人" width="80">
				</el-table-column>
				<el-table-column prop="approvalTime" label="审批时间" width="170">
				</el-table-column>
				<el-table-column label="审批状态" fit>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.approvalStatus===0" type="warning">
							待审批
						</el-tag>
						<el-tag v-if="scope.row.approvalStatus===1" type="success">
							已通过
						</el-tag>
						<el-tag v-if="scope.row.approvalStatus===2" type="danger">
							未通过
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<div style="display: flex">
							<el-button size="mini" @click="examineDialog(scope.row,0)" 
								:type="buttonType(scope.row.approvalStatus)"
								:disabled="buttonDisabled(scope.row.approvalStatus)">
								{{buttonText(scope.row.approvalStatus)}}
							</el-button>
							<el-button size="mini" @click="examineDialog(scope.row,1)">
								详情
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :current-page="currentPage" :page-size="pageSize"
				:total="total" :page-sizes="[20, 50, 100]" 
				@size-change="handleSizeChange" @current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper" >
			</el-pagination>
		</div>
		<!-- 审批 -->
		<el-dialog style="margin-top:0" :visible.sync="examineShow" width="60%"
			:title="dialogTitle" @close="examineDialogClose">
			<el-form inline label-position="top" :model="selectData">
				<el-form-item label="申请人">
					<el-input :value="selectData.nickName" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="开始时间" v-if="selectData.applyType !== 1">
					<el-input :value="selectData.startTime" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="结束时间" v-if="selectData.applyType !== 1">
					<el-input :value="selectData.stopTime" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="请假类型" v-if="selectData.applyType === 0">
					<el-select :value="selectData.vacateType" style="width: 100%;" disabled>
						<el-option label="事假" :value="0"></el-option>
						<el-option label="病假" :value="1"></el-option>
						<el-option label="其他" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="补卡日期" v-if="selectData.applyType === 1">
					<el-input :value="selectData.clockingDate" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="补卡批次" v-if="selectData.applyType === 1">
					<el-input :value="selectData.stringLot" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="地点" v-if="selectData.applyType === 2 || 
					selectData.applyType === 3">
					<el-input :value="selectData.location" readonly>
					</el-input>
				</el-form-item>
				<el-form-item label="申请事由">
					<el-input :value="selectData.applyExplain" readonly
					type="textarea" :autosize="{ minRows: 4, maxRows: 4}">
					</el-input>
				</el-form-item>
				<el-form-item label="申请附件" style="width: 100%;">
					<el-image style="width: 100px; height: 100px"
						v-for="(item,index) in selectData.urlList" :key="index"
						:src="READ_IMG_URL+item" 
						:preview-src-list="addUrl(selectData.urlList)">
					</el-image>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" v-if="examineType === 0">
				<el-button type="danger" @click="examine(2)" v-debounce>驳回</el-button>
			    <el-button type="success" @click="examine(1)" v-debounce>通过</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import attendanceApi from "../../api/employeeAttendance.js";
	import userApi from "../../api/user.js";
	import config from "../../api/apiURL.js";
	export default {
		data() {
			return {
				READ_IMG_URL: config.READ_IMG_URL,
				userInfo: {},
				tableData: [],
				loading: false,
				currentPage: 1,
				pageSize: 50,
				total: 0,
				applicantId: null,
				approvalStatus: null,
				applyType: 0, // 申请类型（0请假，1补卡，2外勤，3出差）
				selectData:{},
				examineShow: false,
				examineType: 0, // 0审核弹窗，1详情弹窗
				dialogTitle: "审核",
				selectLoading: false,
				userList: []
			}
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.getTableData();
		},
		methods: {
			// 获取表格数据
			getTableData(){
				this.loading = true;
				const data = {
					applicantId: this.applicantId,
					applyType: this.applyType,
					approvalStatus: this.approvalStatus,
					currentPage: this.currentPage,
					pageSize: this.pageSize,
				}
				attendanceApi.getAttendanceApplyList(data).then(res =>{
					if (res.code === 200){
						this.total = res.data.total;
						this.tableData = res.data.applyVoList.map((item,index) =>{
							item.i = (this.currentPage-1)*this.pageSize+index+1;
							if (item.accessoryUrl !== null){
								item.urlList = item.accessoryUrl.split(";")
							}
							return item;
						})
						this.$refs.dataTable && this.$refs.dataTable.doLayout();
					}
				}).finally(() =>{
					this.loading = false;
				})
			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.pageSize = pageSize
				this.getTableData()
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.currentPage = curPage
				this.getTableData()
			},
			// 审核弹窗
			examineDialog(row,index){
				this.selectData = row;
				this.examineType = index;
				if (index === 0){
					// 审核
					if(row.applyType === 0){
						// 请假
						this.dialogTitle = "请假审批";
					}else if(row.applyType === 1){
						// 补卡
						this.dialogTitle = "补卡审批";
					}else if(row.applyType === 2){
						// 外勤
						this.dialogTitle = "外勤审批";
					}else if(row.applyType === 3){
						// 出差
						this.dialogTitle = "出差审批";
					}
				}else {
					// 详情
					this.dialogTitle = "详情";
				}
				this.examineShow = true;
			},
			// 审核按钮类型
			buttonType(status){
				if (status === 1){
					return "success";
				}else if (status === 2){
					return "danger";
				}
				return "warning";
			},
			// 审核按钮禁用
			buttonDisabled(status){
				
				if (status === 0 && 
					(this.userInfo.roleId === '1' || this.userInfo.roleId === '5')){
					return false;
				}else if (status === 2 &&
					(this.userInfo.roleId === '1' || this.userInfo.roleId === '5')){
					return false;
				}
				return true;
			},
			// 审核按钮文字
			buttonText(status){
				if (status === 1){
					return "已通过";
				}else if (status === 2){
					return "未通过";
				}
				return "待审核";
			},
			// 审核关闭
			examineDialogClose(){
				
			},
			// 审核
			examine(index){
				let msg = ""
				if (index === 1){
					msg = "是否要通过？"
				}else if (index === 2){
					msg = "是否要驳回？"
				}
				this.$confirm(msg,"提示",{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() =>{
					const data = {
						id: this.selectData.id,
						approvalStatus: index
					}
					attendanceApi.examineAttendanceApply(data).then(res =>{
						if (res.code === 200){
							this.$message.success("操作成功");
							this.selectData = {};
							this.examineShow = false;
							this.getTableData();
						}
					})
				})
			},
			// 远程搜索
			getUserList(query) {
				this.selectLoading = true;
				const data = {
					nickName: query,
				}
				userApi.fuzzyQuery(data).then(res => {
					if (res.code === 200) {
						this.userList = res.data.userVoList;
						this.selectLoading = false;
					}
				})
			},
			// 重置
			reset(){
				this.applicantId = null;
				this.approvalStatus = null;
				this.currentPage = 1;
				this.getTableData();
			},
			addUrl(list){
				let newList = []
				list.forEach(item =>{
					newList.push(this.READ_IMG_URL+item)
				})
				return newList;
			}
		}
	}
</script>

<style>
	.apply {
		height: 100%;
	}
	
	.data-table {
		height: 94%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
	
	.el-form-item{
		width: 350px;
	}
</style>